<template>
  <div class="evaluate">
    <div id="msg_nav">
      <ul>
        <li id="msg_li" @click="msg='待评价'">待评价</li>
        <li id="msg_over_li" @click="msg='已完成'">已完成</li>
      </ul>
    </div>
    <!-- 待评价的内容 -->
    <div v-if="msg=='待评价'?true:false">
      <div
        v-show="pj"
        style="display: none;width:1349px;height:800px;position:fixed;left:-0;top:-0;background-color: rgba(0, 0, 0, 0.5);z-index:100;"
      >
        <div style="width: 800px;height: 320px;position:relative;z-index: 100;margin:150px auto;">
          <form action="#" class="msgarea">
            <textarea v-model="content" name id cols="30" rows="10" placeholder="请输入你要评价的内容"></textarea>
          </form>
          <button @click="Gopingja(carId)" class="msgbtna">评价</button>
          <button @click="pj=!pj" class="msgbtnb">取消</button>
        </div>
      </div>

      <ul id="msg_ul" style="display:block">
        <li v-for="(v,k) in Unevaluate.slice((currentPage-1)*3,(currentPage)*3)" :key="k">
          <div id="msg_top">
            <div>
              <span>订单编号：&nbsp;</span>
              <span>{{v.orderID}}</span>
            </div>
          </div>
          <el-row style="height:160px;">
            <el-col id="msg_img" :md="8" :lg="8">
              <img :src="getOrderimg(v.carPic1)" alt />
            </el-col>
            <el-col id="msg_text" :md="12" :lg="12">
              <ul>
                <li>
                  <h4>{{v.carName}}</h4>
                </li>
                <li>
                  <span>芒种牌/2.0L 1.5L/自动</span>
                </li>
                <li>
                  <span>用车时间：</span>
                  <span>{{v.pickDate}}</span>
                  <span>-</span>
                  <span>{{v.returnDate}}</span>
                </li>
              </ul>
            </el-col>
            <el-col id="order_right" :md="4" :lg="4">
              <p>
                <strong>￥{{v.price}}</strong>
              </p>
              <span class="btn btn-warning" @click="carId=v.carId,orderID=v.orderID,pj=true">立即评价</span>
            </el-col>
          </el-row>
        </li>
        <el-pagination
          background
          :page-size="3"
          :hide-on-single-page="true"
          :pager-count="5"
          layout="prev, pager, next"
          :total="allorders"
          @current-change="allorderpageChange"
          :current-page.sync="currentPage"
          style="text-align:center"
        ></el-pagination>
      </ul>
    </div>

    <!-- 已完成的评价 -->
    <div v-if="msg=='已完成'?true:false">
      <ul id="msg_over_ul" style="display:block">
        <li v-for="(v,k) in evaluate.slice((currentPage-1)*3,(currentPage)*3)" :key="k">
          <div id="msg_over_top">
            <div>
              <span>用户ID:</span>&nbsp;&nbsp;
              <span>{{v.userId}}</span>&nbsp;&nbsp;&nbsp;
            </div>
            <div>
              <span>{{v.evaluateDate|dateDay}}&nbsp;</span>
            </div>
          </div>
          <div id="msg_over_main">
            <p>{{v.content}}</p>
          </div>
          <div id="msg_over_mycar" @click="gotodetail(v.carId)">
            <div id="mycar_img">
              <img :src="getOrderimg(v.carPic1)" alt />
            </div>
            <div id="mycar_text">
              <ul>
                <li>
                  <h4>车名：</h4>
                  <h4>{{v.carName}}</h4>
                </li>
                <li>
                  <span>车辆信息：</span>
                  <span>{{v.brand}}/{{v.displacement}}L/{{v.carConfig}}</span>
                </li>
                <li>
                  <span>用车时间：</span>
                  <span>{{v.pickDate|dateDay}}</span>
                  <span>到</span>
                  <span>&nbsp;{{v.returnDate|dateDay}}</span>
                </li>
              </ul>
            </div>
            <div id="msg_right">
              <p>
                <span>订单金额：</span>
                <strong>￥320</strong>
              </p>
            </div>
          </div>
        </li>
        <el-pagination
          background
          :hide-on-single-page="true"
          :page-size="3"
          :pager-count="5"
          layout="prev, pager, next"
          :total="allorders1"
          @current-change="allorderpageChange"
          :current-page.sync="currentPage1"
          style="text-align:center"
        ></el-pagination>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allorders: null,
      currentPage: 1,
      content: "",
      orderID: "",
      carId: "",
      pj: false,
      allorders1: null,
      currentPage1: 1,
      Unevaluate: [],
      evaluate: [],
      currentUser: {},
      msg: "待评价"
    };
  },
  created() {
    //已评价的订单
    this.$axios
      .post("http://localhost:3000/personal/ShowEvaluate")
      .then(res => {
        console.log("已评价的订单查询结果：", res.data.data);
        this.evaluate = res.data.data;
        this.allorders1 = this.evaluate.length;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });

    //未评价的订单
    this.$axios
      .post("http://localhost:3000/personal/ShowUnEvaluate")
      .then(res => {
        console.log("未评价的订单查询结果：", res.data.data);
        this.Unevaluate = res.data.data;
        this.allorders2 = this.Unevaluate.length;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
    this.getweipingjia();
  },
  beforeUpdate() {
    localStorage.setItem("Over_Msg_Pagination", this.currentPage1);
  },
  beforeDestroy() {
    localStorage.setItem("Over_Msg_Pagination", "1");
  },
  beforeUpdate() {
    localStorage.setItem("Ing_Msg_Pagination", this.currentPage);
  },
  beforeDestroy() {
    localStorage.setItem("Ing_Msg_Pagination", "1");
  },
  inject: ["reload"],
  methods: {
    gotodetail(carId) {
      this.$router.push({ name: "cardetail", query: { carId: carId } });
    },
    allorderpageChange(currentPage1) {
      this.loading = true;
      this.currentPage = currentPage;
      document.documentElement.scrollTop = 0;
    },
    getOrderimg(Orderimg) {
      let path = "http://localhost:3000/upload/" + Orderimg;
      return path;
    },
    Gopingja(carId) {
      this.$axios
        .post("http://localhost:3000/cardetail/userDiscuss", {
          carId: this.carId,
          content: this.content,
          orderID: this.orderID
        })
        .then(res => {
          console.log("添加评价", res.data.data);
          this.Unevaluate = res.data.data;
          this.reload();
        })
        .catch(err => {
          console.log("错误信息：", err);
        });

      this.pj = false;
    },
    getOrderimg(msgimg) {
      // return require("../assets/QJ/" + msgimg);
      let path = "http://localhost:3000/upload/" + msgimg;
      return path;
    },
    getweipingjia() {
      this.$axios
        .post("http://localhost:3000/personal/ShowEvaluate")
        .then(res => {
          console.log("已评价的订单查询结果：", res.data.data);
          this.evaluate = res.data.data;
        })
        .catch(err => {
          console.log("错误信息：", err);
        });
    }
  },
  watch: {
    $route(to, from) {
      getweipingjia();
    }
  }
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.evaluate {
  flex: 2;
}

ul {
  list-style: none;
}
.msgarea {
  display: block;
  position: relative;
  top: 5%;
  text-align: center;
}
.msgarea textarea {
  width: 80%;
  height: 70%;
  border: 1px solid rgb(223, 201, 10);
  border-radius: 4px;
}
.msgbtna,
.msgbtnb {
  width: 60px;
  height: 30px;
  position: relative;
  top: 30px;
  left: 570px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
}
.msgbtna {
  margin-right: 30px;
}
#msg_img img {
  width: 150px;
}
#msg_text {
  margin-top: 0;
}
#msg_text ul {
  line-height: 20px;
}
#msg_text h4 {
  font-size: 16px;
}
#msg_nav > ul {
  border-bottom: 2px solid grey;
}

#msg_nav > ul > li {
  width: 50px;
  height: 30px;
  display: inline-block;
  text-align: center;
  margin-bottom: 5px;
  cursor: pointer;
}

#msg_ul > li {
  height: 200px;
  border: 2px solid transparent;
  box-shadow: 0 0 6px #ccc;
  margin-bottom: 20px;
}

#msg_top {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  border-bottom: 2px solid rgb(219, 217, 217);
}

#msg_top div {
  margin-left: 20px;
}

#msg_top strong {
  margin-left: 20px;
}

#msg_main {
  width: 100%;
  height: 110px;
  background-color: #fff;
  display: flex;
}

#msg_main img {
  width: 150px;
  flex: 2;
  margin: 10px;
  margin-top: 15px;
}

#msg_text {
  margin-top: 15px;
}

#msg_text > ul {
  flex: 5;
}

#msg_text > ul > li {
  margin: 8px;
}

#msg_text li h4 {
  display: inline-block;
  margin: 0px;
}

#msg_right {
  flex: 2;
  margin-top: 15px;
  text-align: center;
}

#msg_over_ul > li {
  width: 100%;
  height: 100%;
  margin-bottom: 20px;
  border: 2px solid transparent;
  box-shadow: 0 0 6px #ccc;
  padding-bottom: 20px;
}

#msg_over_top {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  border-bottom: 2px solid rgb(219, 217, 217);
}

#msg_over_top > div {
  margin-left: 20px;
}

#msg_over_top > div:last-child {
  text-align: left;
  font-size: 10px;
  color: gray;
  position: absolute;
  right: 10px;
}

#msg_over_main {
  margin-top: 10px;
  margin-left: 10px;
}

#msg_over_img > img {
  width: 150px;
}

#msg_over_mycar {
  width: 100%;
  height: 150px;
  display: flex;
  margin-top: 20px;
  background-color: #f1f1f1;
  margin-left: 0;
  cursor: pointer;
}

#mycar_img {
  width: 200px;
  height: 100%;
}

#mycar_img > img {
  width: 100%;
  height: 100%;
}

#mycar_text {
  margin-left: 10px;
}

#mycar_text li {
  margin: 5px;
}

#mycar_text h4 {
  display: inline-block;
}

#msg_over_bottom {
  margin-top: 20px;
  margin-bottom: 10px;
}
</style>
